<template>
  <div class="hello">
    <div class="bb_header">
      <van-row>
        <van-col span="6"><img class="img_header" src="../assets/logo.png"></van-col>
        <van-col span="13">
          <van-search
          class="search_header"
          placeholder="请输入搜索关键词"
          input-align="left"
        /></van-col>
        <van-col span="5"><van-button class="btn_header" size="small" type="primary">搜索</van-button></van-col>
      </van-row>
      <van-tabs v-model="active">
        <van-tab title="推荐"></van-tab>
        <van-tab title="百货"></van-tab>
        <van-tab title="运动"></van-tab>
        <van-tab title="食品"></van-tab>
        <van-tab title="服饰"></van-tab>
        <van-tab title="鞋包"></van-tab>
        <van-tab title="电器"></van-tab>
        <van-tab title="手机"></van-tab>
        <van-tab title="饰品"></van-tab>
        <van-tab title="车饰"></van-tab>
        <van-tab title="电子产品"></van-tab>
        <van-tab title="其他"></van-tab>
      </van-tabs>
    </div>
    <div class="swp">
    <van-swipe :autoplay="5000" class="swp_img">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" width="100%"/>
      </van-swipe-item>
    </van-swipe>
      <van-notice-bar
        left-icon="volume-o"
        text="满眼生机转化钧，天工人巧日争新。预支五百年新意，到了千年又觉陈。"
      />
      <van-row>
        <van-col style="text-align:center;margin-top:.2rem" span="8">
          <span>网易自营品牌</span>
        </van-col>
        <van-col style="text-align:center;margin-top:.2rem" span="8">
          <span>30天无忧退货</span>
        </van-col>
        <van-col style="text-align:center;margin-top:.2rem" span="8">
          <span>48小时快速退款</span>
        </van-col>
      </van-row>
      <van-grid :column-num="5">
        <van-grid-item v-for="(item,index) in GridList" :key="index">
          <img :src="item.url" width="100%" />
          <span style = "margin-top:0.1rem;font-size:0.3rem">{{item.name}}</span>
        </van-grid-item>
      </van-grid>
      <van-row style="background:#eee;height:3rem;padding:0.5rem 0 0.5rem 0">
        <van-col :span = "12" style="text-align:center">
          <img src="@/assets/kouzhao.png" alt="" width="80%">
        </van-col>
        <van-col :span = "12" style="text-align:center">
          <img src="@/assets/kouzhao2.png" alt="" width="80%">
        </van-col>
      </van-row>
      <van-row style="background:#eee;height:3rem;padding:0.5rem 0 0.5rem 0">
        <van-col :span = "12" style="text-align:center">
          <img src="@/assets/kouzhao.png" alt="" width="80%">
        </van-col>
        <van-col :span = "12" style="text-align:center">
          <img src="@/assets/kouzhao2.png" alt="" width="80%">
        </van-col>
      </van-row>
      <van-row style="background:#eee;height:3rem;padding:0.5rem 0 0.5rem 0">
        <van-col :span = "12" style="text-align:center">
          <img src="@/assets/kouzhao.png" alt="" width="80%">
        </van-col>
        <van-col :span = "12" style="text-align:center">
          <img src="@/assets/kouzhao2.png" alt="" width="80%">
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      active:0,
      images: [
        "https://yanxuan.nosdn.127.net/b3782def13e1fbba9f08bf8545be15d0.png?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/a71f0ae8d65206cee78095cdf9fc9af5.png?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/a787a84725a6bfc0a08f5eb83347cf93.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/19b08524cc5b16fb79a4dff89e8529d6.jpg?type=webp&imageView&quality=75&thumbnail=750x0"
      ],
      GridList: [
        {
          url:
            "https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png",
          name: "新品首发"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png",
          name: "居家生活"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png",
          name: "服饰鞋包"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png",
          name: "合肥推拿"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png",
          name: "精油护体"
        },

        {
          url:
            "https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png",
          name: "服务服务"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png",
          name: "旅游外出"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/fbca8e1f2948f0c09fc7672c2c125384.png",
          name: "私人影院"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/f7281169d4e82d5d8d52aa1fec83fe01.png",
          name: "洗脚按摩"
        },
        {
          url:
            "https://yanxuan.nosdn.127.net/12e8efd15b9b210ab156a7ee9b340548.gif",
          name: "KTV"
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img_header{
  width: 2rem;
  margin: 0.42rem;
}
.search_header{
  margin:0.3rem 0.15rem;
  padding: 0;
  border:1px green solid;
  border-radius: 1.2rem;
}
.van-search__content{
  background-color: #fff;
  border-radius: 1.2rem;
}
.btn_header {
  margin: 0.36rem 0 0 0.1rem;
  width: 1.5rem;
  border-radius: 1.2rem;
}
.bb_header{
  width: 100%;
  position:fixed;
  z-index:1;
  top:0px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  background-color: #ffffff;
}
.swp{
margin-top: 110px;
}
</style>
